<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    title="自动判定设置"
    :visible.sync="open"
    width="1000px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
      <el-form-item label="执行方式">
        <el-radio-group v-model="form.implementWay">
          <el-radio label="cycle">周期性执行</el-radio>
          <el-radio label="timing">定时执行</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="执行配置">
        每
        <template v-if="form.implementWay == 'cycle'">
          <el-input-number v-model="form.num" controls-position="right" :min="1" />
          <el-select v-model="form.timeWay" placeholder="请选择" style="margin: 0 10px">
            <el-option v-for="item in timeWayOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template v-if="form.implementWay == 'timing'">
          <el-select v-model="form.day" placeholder="请选择" style="margin: 0 10px">
            <el-option v-for="item in dayOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-time-picker
            v-model="form.timePicker"
            :picker-options="{
              // selectableRange: '18:30:00 - 20:30:00',
            }"
            placeholder="任意时间点"
          />
        </template>
        <span>执行一次</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      open: false,
      form: {
        implementWay: 'cycle'
      },
      timeWayOptions: [
        {
          label: '分钟',
          value: '0'
        },
        {
          label: '小时',
          value: '1'
        }
      ],
      dayOptions: [
        {
          label: '天',
          value: 'day'
        },
        {
          label: '周',
          value: 'week'
        },
        {
          label: '月',
          value: 'mobth'
        }
      ]
    }
  },
  methods: {
    cancel() {
      this.open = false
    },
    handleSave() {
      this.$message.success('保存成功')
      this.open = false
    }
  }
}
</script>

<style></style>
